<template>
  <div class="playMask" @click="playMaskClick">
    <!-- 播放按钮 -->
    <div
      class="play"
      :style="{
        width: maskWidth + 'px',
        height: maskHeight + 'px',
        backgroundSize: maskWidth + 'px',
      }"
    ></div>
  </div>
</template>

<script>
export default {
  name: "GlobalPlayMask",
  props: {
    // 注意 宽度和高度 必须 要相等
    maskWidth: {
      default: 64,
      required: true,
      type: Number,
    },
    maskHeight: {
      default: 64,
      required: true,
      type: Number,
    },
  },
  components: {},
  data() {
    return {};
  },
  created() {},
  methods: {
    playMaskClick() {
      console.log("playMask被点击~~~~~~~~~~~~");
      this.$emit("maskClick");
    },
  },
  computed: {},
};
</script>

<style lang="less" scoped>
.playMask {
  .play {
    display: none;
    // display: block;
    position: absolute;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
    transform: translate(-50%, -50%);
    background: url("../assets/images/btn-play.png");
    animation: pulse 2s infinite;
  }
}
</style>
